import { ComponentProps, Hook, VueComponent } from "vue3-oop"
import { Col } from 'ant-design-vue';
import Draggable from 'vuedraggable';
import FdnWidget from '../fdn-widget'
import { ExpandOutlined,LeftOutlined,RightOutlined,CloseOutlined,DragOutlined } from '@ant-design/icons-vue'

import moduleCss from './fdn-grid.module.scss'
import { FormData,WidgetNode,ReserveItem } from '../../types/index'

import { LAYOUT,GRID } from '../attr-widget'

interface IProps {
  formData: FormData,
  widgetNode: WidgetNode
}
export default class FdnGrid extends VueComponent<IProps> {
  static defaultProps: ComponentProps<IProps> = {
    formData: {},
    widgetNode: {}
  }

  constructor(
  ) {
    super();
  }

  // 拖动新增组件
  handleDragAddDraftFormWidget=(event:any)=>{
    const { formData,widgetNode } = this.props;
    // 获取darggable组件列表新增项的下标
    const newIndex = event.newIndex;
    const targetList = widgetNode.children;
    const targetNode = targetList[newIndex];

    if(targetNode.widgetId){
      // 已存在组件
      targetNode.parentId = widgetNode.widgetId;
      targetNode.setSelected();
    }else{
      // 新增组件
      const reserveItem = (targetNode as any) as ReserveItem;
      formData.createNewWidgetNode(widgetNode,reserveItem,newIndex);
    }
    
  };

  @Hook('Mounted')
  onMounted(){
    const form = document.querySelector('.designer-draft-form')
    // console.log(form?.scrollWidth)
  }

  render() {
    const { formData,widgetNode } = this.props;
    const widgetItem = widgetNode.widgetItem;
    const attr = widgetItem[widgetItem.type] as GRID;
    
    let defaultSpan = attr.defaultSpan;
    defaultSpan = defaultSpan?defaultSpan:24;

    // 水平间距
    const gutterHorizon = attr.gutter[0][formData.winSize];
    // 垂直间距
    const gutterVertical = attr.gutter[1][formData.winSize]

    return (
      <Draggable
        {...{
          animation:"300",
          group:{
            name: 'form'
          },
          chosenClass:"chosenClass",
          dragClass:"dragClass",
          ghostClass:"ghostClass",
          onAdd:this.handleDragAddDraftFormWidget
        }}
        class={[moduleCss['fdn-grid'],'ant-row',`default-span-${defaultSpan}`]}
        item-key="id"
        list={widgetNode.children}
        style={{
          flexWrap:'wrap',
          alignContent: 'flex-start',
          minHeight:'56px',
          rowGap:`${gutterVertical}px`
        }}
        componentData={{}}
      >
        {{
          item:({element}:any)=>{
            const childNode = element as WidgetNode;
            if(childNode.widgetId){
              const childItem = childNode.widgetItem;
              const childAttr = childItem[childItem.type] as LAYOUT;
              const isActive = childNode.isSelected();
              const activeClass = isActive ? 'active' : undefined;
  
              // let reactiveAttr = childItem.ATTR_LAYOUT?.reactive[formData.winSize];

              // reactiveAttr = reactiveAttr?reactiveAttr:defaultSpan;
  
              return (childNode.widgetId &&
                <Col
                  class={[moduleCss['drag-item'],'ant-col',activeClass]} 
                  {...{
                    onClick:(event:MouseEvent)=>{
                      event.stopPropagation();
                      childNode.setSelected();
                    },
                    style:{
                      height:'unset',
                      padding: `0 ${gutterHorizon/2}px`
                    },
                    ...childAttr.layout_reactive
                  }}
                >
                  <FdnWidget
                    formData={formData}
                    widgetNode={childNode}
                  />
                  {isActive&&
                  <div class={[moduleCss['drag-tool']]}>
                    {/* 选择外层组件 */}
                    <ExpandOutlined
                      onClick={(event:MouseEvent)=>{
                        event.stopPropagation();
                        childNode.setParentSelected();
                      }}
                    />
                    {/* 前移一位 */}
                    <LeftOutlined 
                      onClick={(event:MouseEvent)=>{
                        event.stopPropagation();
                        childNode.moveFoward();
                      }} 
                    />
                    {/* 后移一位 */}
                    <RightOutlined 
                      onClick={(event:MouseEvent)=>{
                        event.stopPropagation();
                        childNode.moveBackwards();
                      }}
                    />
                    {/* 删除组件 */}
                    <CloseOutlined 
                      onClick={(event:MouseEvent)=>{
                        event.stopPropagation();
                        childNode.remove();
                      }}
                    />
                    {/* 拖动组件 */}
                    <DragOutlined style={{cursor:'move'}}/>
                  </div>
                  }
                </Col>
              )
            }
          }
        }}
      </Draggable>
    )
  }
}